<template>
  <div class="vision-container">
    <div class="return-btn" @click="goBack">
      <i class="iconfont icon-back"></i>
    </div>
    <div :style="{transform: `scale(${scale}) translate(-50%,-50%)`}" class="vision-wrapper">
      <div class="bg">
        <img src="@/assets/img/vision.png" alt="">
      </div>
      <div class="header above">
        <div class="app-name wow fadeInDown opacity" data-wow-duration="1.2s" data-wow-delay="0s">
          <span>{{title}}</span>
          <div class="border"></div>
        </div>
        <div class="shape wow fadeInLeftSmall opacity">
          <div class="s1"></div>
          <div class="s2"></div>
        </div>
        <div class="shape-r wow fadeInRightSmall opacity">
          <div class="s2"></div>
          <div class="s1"></div>
        </div>
      </div>
      <div class="body above">
        <div class="left-part">
          <div class="left-top cell-part wow fadeInUpFix opacity" data-wow-duration="0.5s" data-wow-delay="0s">
            <div class="border"></div>
            <div class="t1 above">AI智能处置</div>
            <div class="t2 above">{{setReport?.aiDisposal}}</div>
            <div class="t3 above">AI趋势分析</div>
            <div class="t4 above" id="left-top"></div>
          </div>
          <div class="left-bottom cell-part wow fadeInUpFix opacity" data-wow-duration="0.5s" data-wow-delay="0.3s">
            <div class="border"></div>
            <div class="t1 above">事件违规次数</div>
            <div class="t4 above" id="left-bottom"></div>
          </div>
        </div>
        <div class="mid-part">
          <div class="mid-top cell-part wow fadeInUpFix opacity" data-wow-duration="0.5s" data-wow-delay="0.1s">
            <div class="border"></div>
            <div class="t1 above">
              <div class="item" v-for="(item, idx) in liveList" :key="item" :class="curLive == idx ? 'item-on': ''" @click="setLive(idx)">{{item.name}}</div>
            </div>
          </div>
          <div class="mid-bottom cell-part wow fadeInUpFix opacity" data-wow-duration="0.5s" data-wow-delay="0.4s">
            <div class="border"></div>
            <div class="t1 above">设备在线情况</div>
            <div class="t2 above">
              <div class="total">
                <div class="t3">设备总计</div>
                <div class="t4">
                  {{deviceCount?.deviceCount}}<span>个</span>
                </div>
              </div>
              <div class="list">
                <div class="item">
                  <div class="t3">
                    {{deviceCount?.onlineCount}}<span>个</span>
                  </div>
                  <div class="t4"><span>在线<i></i></span></div>
                </div>
                <div class="item off">
                  <div class="t3">
                    {{deviceCount?.offlineCount}}<span>个</span>
                  </div>
                  <div class="t4"><span>离线<i></i></span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-part">
          <div class="right-top cell-part wow fadeInUpFix opacity" data-wow-duration="0.5s" data-wow-delay="0.2s">
            <div class="border"></div>
            <div class="t1 above">本周严重视频</div>
            <div class="t2 above">
              <video  id="video" autoplay="autoplay" muted='muted' :src="weekMost.videoUrl" controls="controls" :poster="weekMost.videoCover"></video>
              <i class="iconfont icon-shipin"></i>
            </div>
          </div>
          <div class="right-bottom cell-part wow fadeInUpFix opacity" data-wow-duration="0.5s" data-wow-delay="0.5s">
            <div class="border"></div>
            <div class="t1 above">{{weekMost?.event}}</div>
            <div class="t2 above">{{weekMost?.aiDisposal}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts';
  import {WOW} from 'wowjs'
  import * as api from "@/api";
  let topLeft = null
  let topBottom = null;
  let timer = null;
  export default {
    name: "Screen",
    data() {
      return {
        scale: 1,
        curLive: 0,
        weekMost: {
          "videoUrl": "",
          "videoCover": "",
          "event": "",
          "aiDisposal": ""
        },
        deviceCount: {
          deviceCount: 0,
          offlineCount: 0,
          onlineCount: 0,
        },
        setReport: {},
        axis: [],
        data: [],
        rate: 0,
        typeCount: [],
        title: '',
        liveList: []
      }
    },
    methods: {
      goBack() {
        this.$router.push({
          name: 'Analysis'
        })
      },
      async eventTypeStatistics() {
        try {
          const {data} = await api.eventTypeStatistics();
          if (!data.code) {
            this.typeCount = data.data
            this.initLeftBottomChart();
          }
        } catch (e) {
          console.log(e)
        }
      },
      async getLiveStreamUrl() {
        try {
          const {data} = await api.getLiveStreamUrl();
          if (!data.code) {
            this.liveList = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },
      async getScreenName() {
        try {
          const {data} = await api.getScreenName();
          if (!data.code) {
            this.title = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },

      async getLeftTopData() {
        try {
          const {data} = await api.aiAnalysis();
          if (!data.code) {
            let arr = data.data
            let axis1 = arr[0].seriesData.map(item => item.eventDate);
            let axis2 = arr[1].seriesData.map(item => item.eventDate);
            this.axis = axis1.concat(axis2);
            let data1 = arr[0].seriesData.map(item => item.eventCount);
            let data2 = arr[1].seriesData.map(item => item.eventCount);
            this.data = data1.concat(data2);
            this.rate = (data1.length - 1) / this.data.length
            this.initLeftTopChart();
          }
        } catch (e) {
          console.log(e)
        }
      },

      async lastDisposal() {
        try {
          const {data} = await api.lastDisposal();
          if (!data.code) {
            this.setReport = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },
      async weeklyMostSeriousEvent() {
        try {
          const {data} = await api.weeklyMostSeriousEvent();
          if (!data.code) {
            this.weekMost = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },
      setLive(item) {
        this.curLive = item
      },
      initLeftTopChart() {
        if (!topLeft) {
          topLeft = echarts.init(document.getElementById('left-top'));
        }
        let that = this;
        topLeft.setOption({
          tooltip: {
            trigger: 'axis',
            showContent: false,
          },
          grid: {
            top: '15',
            bottom: '0',
            left: '40',
            right: '40',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: that.axis,
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666',
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 10,
                color: '#eaeaea',
                fontFamily: 'PingFang SC',
                lineHeight: 24
              }
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666',
              }
            },
            splitLine: {
              lineStyle: {
                color: '#333',
                type: 'dashed'
              }
            },
            axisLabel: {
              show: false,
              textStyle: {
                fontSize: 10,
                color: '#eaeaea',
                fontFamily: 'PingFang SC',
                lineHeight: 24
              }
            },
          },
          series: [
            {
              color: {
                colorStops: [
                  {
                    offset: that.rate, color: 'rgba(30, 200, 98, 1)' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#007bff' // 100% 处的颜色
                  }
                ],
              },
              data: that.data,
              type: 'line',
              smooth: true,
              lineStyle: {
                width: 3,
              },
              showSymbol: true,
              symbol: 'image://',
              symbolSize: 14,

            }
          ]
        });
      },
      initLeftBottomChart() {
        if (!topBottom) {
          topBottom = echarts.init(document.getElementById('left-bottom'));
        }
        let axis = this.typeCount.map(item => item.label)
        let data = this.typeCount.map(item => item.num)
        topBottom.setOption({
          tooltip: {
            trigger: 'axis',
            showContent: false,
          },
          grid: {
            top: '25',
            bottom: '0',
            left: '25',
            right: '25',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: axis,
            boundaryGap: true,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666',
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 10,
                color: '#eaeaea',
                fontFamily: 'PingFang SC',
                lineHeight: 24
              }
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666',
              }
            },
            splitLine: {
              lineStyle: {
                color: '#333',
                type: 'dashed'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 10,
                color: '#eaeaea',
                fontFamily: 'PingFang SC',
                lineHeight: 24
              }
            },
          },
          series: [
            {
              color: 'rgba(30, 200, 98, 1)',
              data: data,
              type: 'bar',
              barWidth: 21,
              label: {
                show: true,
                position: 'top',
                fontSize: 10,
                color: 'rgba(30, 200, 98, 1)',
                fontFamily: 'PingFang SC',
                lineHeight: 24
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#1EC862'
                  }, {
                    offset: 1,
                    color: 'rgba(15,98,48,0)'
                  }]),
                  barBorderRadius: [5, 5, 0, 0],
                }

              },
            }
          ]
        });
      },
      async deviceStatusStatistics() {
        try {
          const {data} = await api.deviceStatusStatistics();
          if (!data.code) {
            this.deviceCount = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },


      setScale() {
        let scale = 1;
        if ((window.innerWidth / 1920) > (window.innerHeight / 1080)) {
          scale = window.innerHeight / 1080;
        } else {
          scale = window.innerWidth / 1920;
        }
        this.scale = scale
      // document.getElementById('body').style.transform = 'scale('+scale+') translateX(-50%) translateY(-50%)'
      }
    },
    mounted() {
      topLeft = null
      topBottom = null;
      this.$nextTick(() => {
        new WOW({
          offset: -10000
        }).init()
      })

      this.lastDisposal();
      this.getLeftTopData();
      this.eventTypeStatistics()
      this.deviceStatusStatistics()
      this.getScreenName()
      this.getLiveStreamUrl();
      // timer = setInterval(() => {
      //   this.initLeftTopChart();
      //   this.initLeftBottomChart();
      // }, 3000);

      this.setScale();
      window.addEventListener('resize', this.setScale)
    },
    beforeUnmount() {
      clearInterval(timer)
      timer = null
      window.removeEventListener('resize', this.setScale)
    },
    unmounted() {
      clearInterval(timer)
      timer = null
      window.removeEventListener('resize', this.setScale)
    },
  }
</script>
<style lang="scss">
  .opacity{
    opacity: 0;
    animation-fill-mode: forwards;
  }
  .return-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: $color;
    position: fixed;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;


    i{
      font-size: 20px;
      color: #ffff;
    }
  }
  .vision-container{
    width: 100vw;
    height: 100vh;
    background: #010302;
    position: relative;
  }
  .vision-wrapper{
    width: 1920px;
    height: 1080px;
    background: #010302;
    position:absolute;
    top: 50%;
    left: 50%;
    transform-origin: left top;
    .above{
      position: relative;
      z-index: 5;
    }
    .border{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      z-index: 1;
      border: 1px solid transparent;
      border-radius: 32px;
      box-sizing: border-box;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      pointer-events: none;
      transition: 0.6s ease;
      background-size: 100% 200%;
      background-image: linear-gradient(180deg, #000 0%, rgb(31,52,45)), linear-gradient(180deg, #000 0%, #1FD267);
    }
    .bg{
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
      img{
        @include fit(contain);
      }
    }
    .header{
      width: 100%;
      height: 85px;
      .app-name{

        width: 900px;
        height: 85px;
        background: linear-gradient( 169deg, rgba(7,176,82,0.2) 0%, #181818 86%);
        text-align: center;
        border-radius: 0 0 85px 85px;
        font-weight: 500;
        font-size: 36px;
        color: #FFFFFF;
        line-height: 85px;
        position: relative;
        @include horizontal();
        span{
          position: relative;
          z-index: 5;
        }
        .border{
          border-radius: 0 0 85px 85px;
        }
      }
      .shape{
        height: 85px;
        display: flex;
        align-items: center;
        position: absolute;
        left: 0px;
        top: 0px;
        .s1{
          width: 388px;
          height: 6px;
          background: linear-gradient(-90deg, #1EC862 0%, rgba(15,98,48,0) 75%);
          border-radius: 6px;
        }
        .s2{
          width: 8px;
          height: 8px;
          background: $color;
          border-radius: 50%;
          margin-left: 16px;
        }
      }
      .shape-r{
        height: 85px;
        display: flex;
        align-items: center;
        position: absolute;
        right: 0px;
        top: 0px;
        .s1{
          width: 388px;
          height: 6px;
          background: linear-gradient(90deg, #1EC862 0%, rgba(15,98,48,0) 75%);
          border-radius: 6px;
        }
        .s2{
          width: 8px;
          height: 8px;
          background: $color;
          border-radius: 50%;
          margin-right: 16px;
        }
      }
    }
    .body{
      box-sizing: border-box;
      padding: 40px 50px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .border{
        border-radius: 40px;
      }
      .cell-part{
        position: relative;
        &:hover{
          .border{
            background-size: 100% 100%;
          }
        }
      }
      .left-part{
        float: left;
        .left-top{
          width: 545px;
          height: 543px;
          background: linear-gradient( 169deg, rgba(7,176,82,0.2) 0%, #181818 86%);
          box-shadow: inset 0px 4px 4px 0px rgba(0,0,0,0.25);
          border-radius: 40px 40px 40px 40px;
          box-sizing: border-box;
          padding: 0 25px;
          margin-bottom: 25px;
          position: relative;

          .t1{
            width: 100%;
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 23px;
            padding-top: 20px;
            margin-bottom: 30px;

          }
          .t2{
            font-weight: 400;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 40px;
            margin-bottom: 30px;
            height: 210px;
          }
          .t3{
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 23px;
            margin-bottom: 5px;
          }
          .t4{
            width: calc(100% + 50px);
            height: 180px;
            margin-left: -25px;
          }
        }
        .left-bottom{
          width: 545px;
          height: 337px;
          background: linear-gradient( 169deg, rgba(7,176,82,0.2) 0%, #181818 86%);
          box-shadow: inset 0px 4px 4px 0px rgba(0,0,0,0.25);
          border-radius: 40px 40px 40px 40px;
          box-sizing: border-box;
          padding: 0 25px;
          position: relative;
          .t1{
            width: 100%;
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 23px;
            padding-top: 20px;
            margin-bottom: 15px;
          }
          .t4{
            width: calc(100% + 50px);
            height: 250px;
            margin-left: -25px;
          }
        }
      }
      .mid-part{
        float: left;

        .mid-top{
          width: 706px;
          height: 543px;
          background: linear-gradient( 169deg, rgba(7,176,82,0.2) 0%, #181818 86%);
          box-shadow: inset 0px 4px 4px 0px rgba(0,0,0,0.25);
          border-radius: 40px 40px 40px 40px;
          margin-bottom: 25px;
          .t1{
            width: 100%;
            padding-top: 20px;
            box-sizing: border-box;
            padding-left: 95px;
            padding-right: 95px;
            display: flex;
            justify-content: space-between;
            .item{
              width: 148px;
              height: 49px;
              background: #303F2E;
              border-radius: 8px 8px 8px 8px;
              transition: 0.3s ease;
              text-align: center;
              line-height: 49px;
              font-weight: 400;
              font-size: 18px;
              color: #FFFFFF;
              cursor: pointer;
            }
            .item-on{
              background: $color;
            }
          }
        }
        .mid-bottom{
          width: 706px;
          height: 337px;
          background: linear-gradient( 169deg, rgba(7,176,82,0.2) 0%, #181818 86%);
          box-shadow: inset 0px 4px 4px 0px rgba(0,0,0,0.25);
          border-radius: 40px 40px 40px 40px;
          box-sizing: border-box;
          padding: 0 25px;
          .t1{
            width: 100%;
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 23px;
            padding-top: 20px;
            margin-bottom: 15px;
          }
          .t2{
            width: 100%;
            margin-top: 52px;
            box-sizing: border-box;
            padding: 0 100px;
            .total{
              width: 100%;
              .t3{
                width: 100%;
                text-align: center;
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
              }
              .t4{
                width: 100%;
                text-align: center;
                font-weight: 500;
                font-size: 40px;
                color: $color;
                margin-top: 8px;
                span{
                  font-size: 16px;
                  font-weight: 400;
                }
              }
            }
            .list{
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-top: 30px;
              .item{
                .t3{
                  width: 100%;
                  text-align: center;
                  font-weight: 500;
                  font-size: 30px;
                  color: #fff;
                  margin-bottom: 8px;
                  span{
                    font-size: 14px;
                    font-weight: 400;
                  }
                }
                .t4{
                  width: 100%;
                  text-align: center;
                  font-weight: 500;
                  font-size: 16px;
                  color: #FFFFFF;
                  position: relative;
                  span{
                    position: relative;
                  }
                  i{
                    position: absolute;
                    top: -2px;
                    right: -8px;
                    display: block;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #FE5454;
                  }
                }
              }
              .off{
                .t3{
                  font-weight: 400;
                  color: #D8D8D8;
                }
                .t4{
                  font-weight: 400;
                  color: #D8D8D8;
                  i{
                    background: #A6A6A6;
                  }
                }
              }
            }
          }
        }
      }
      .right-part{
        float: left;
        .right-top{
          width: 525px;
          height: 337px;
          background: linear-gradient( 169deg, rgba(7,176,82,0.2) 0%, #181818 86%);
          box-shadow: inset 0px 4px 4px 0px rgba(0,0,0,0.25);
          border-radius: 40px 40px 40px 40px;
          box-sizing: border-box;
          padding: 0 25px;
          margin-bottom: 25px;
          .t1{
            width: 100%;
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 23px;
            padding-top: 20px;
            margin-bottom: 20px;
          }
          .t2{
            width: 100%;
            height: 246px;
            background: #0F341F;
            border-radius: 32px 32px 32px 32px;
            position: relative;
            overflow: hidden;
            video{
              width: 100%;
              height: 100%;
            }
            i{
              width: 80px;
              height: 80px;
              @include center;
              display: inline-block;
              font-size: 80px;
              color: rgba(255,255,255,0.6);
              cursor: pointer;
              transition: 0.3s ease;
              z-index: 5;
              &:hover{
                opacity: 0.8;
                transform: scale(0.95);
              }
            }
          }
        }
        .right-bottom{
          width: 525px;
          height: 543px;
          background: linear-gradient( 169deg, rgba(7,176,82,0.2) 0%, #181818 86%);
          box-shadow: inset 0px 4px 4px 0px rgba(0,0,0,0.25);
          border-radius: 40px 40px 40px 40px;
          box-sizing: border-box;
          padding: 0 25px;
          .t1{
            width: 100%;
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 23px;
            padding-top: 20px;
            margin-bottom: 20px;
          }
          .t2{
            width: 100%;
            font-weight: 400;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 40px;
          }
        }
      }
    }

  }

</style>
